<template>
  <s-layout class="set-wrap" :opacity="true" backgroundColor="#FD4F2D" color="#fff" :bgStyle="{ color: '#f3f5f9' }" title="我的拼币">
     <view class="qianone">
      <view class="qioneitem">
        <text class="jiname"><text class="jinum">{{ state.info.score||0 }}</text>拼币</text>
        <text class="shixiao">{{state.info.endtime_text}}</text>

        <view class="guize" @click="getgui">
          签到规则
        </view>
      </view>
     </view>
     <view class="qiantwo">
      <view class="qianji">
        <text class="lianxu">{{state.info.top_text}}</text>
      </view>
      <view class="qianbiao">
        <text class="qianname">已连续签到<text class="qiannum">{{ state.info.continue_day }}</text>天</text>
        <text class="jiming" @click="getmingxi">拼币明细</text>
      </view>
      <view class="qianlist">
         <view class="qianitem" :class="item.status == 1?'qianactive':''" v-for="(item,index) in state.info.list" :key="index">
          <text class="qname">{{item.title}}</text>
          <image
              class="mine_yue"
              src="/static/mine_yue.png"
              mode=""
            ></image>
            <text class="jimiao">{{item.score}}拼币</text>
         </view>
      </view>
      <view class="qianbtn" :class="state.info.button_type==1?'gou':''" @click="getqiandao">{{state.info.button_text}}</view>
     </view>

     <view class="dui">
       <view class="duixian"></view>
       <text class="duiname">拼币兑换专区</text>
       <view class="duixian"></view>
     </view>
     <view class="duilist">
      <view class="duiitem" v-for="(item,index) in state.pagination.data" :key="index">
         <view class="duitu">
          <image
              class="data-empty"
              :src="item.image"
              mode="widthFix"
            ></image>
         </view>
        <view class="duibot">
          <text class="dangtian">{{item.name}}</text>
          <view class="dangview">
            <view class="dleft">
              <image
                class="jinbi"
                src="/static/mine_yue.png"
                mode=""
              ></image>
              <text class="jinname">{{item.score}}</text>
            </view>
            <view class="jidui " :class="item.button_type==1?'gou':''" @click="getduihuan(item)">{{item.button_text}}</view>
          </view>
        </view>
      </view>
     </view>

  </s-layout>
</template>

<script setup>
  import { onLoad,onReachBottom } from '@dcloudio/uni-app';
  import { computed, reactive, ref, unref } from 'vue';
  import sheep from '@/sheep';

  const filesRef = ref(null);
  const state = reactive({
    radioList: [
      {
        type: '产品功能问题反馈',
      },
      {
        type: '建议及意见反馈',
      },
      {
        type: '投诉客服其他问题',
      },
    ],
    formData: {
      content: '',
      phone: '',
      images: [],
      type: '',
    },
    imageFiles: [],
    current: 0,
    info:{},
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    loadStatus: '',
  });

  async function getinfo() {
    const res = await sheep.$api.goods.getSignInfo({
    });
    state.info = res.data
  }

  function getmingxi() {
    sheep.$router.go('/pages/public/QianMingxi');
  }
  function getgui(){
    sheep.$router.go('/pages/public/QianGui');
  }
  async function getqiandao(){
    if(state.info.button_type == 1){  
      const res = await sheep.$api.goods.signin({
      });
      if(res.code == 1){
        sheep.$helper.toast(res.msg);
        getinfo()
      }else{
        sheep.$helper.toast(res.msg);
      }
      
    }
  }
  async function getGrouponList() {
    state.loadStatus = 'loading';
    let res = await sheep.$api.goods.getScoreGoods({
      page: state.pagination.current_page,
    });
    if (res.code === 1) {

      state.pagination.last_page = res.data.lastpage;
			let list = res.data.list;
			state.pagination.data = state.pagination.current_page == 1 ? list : [...state.pagination.data, ...list];
			if (state.pagination.current_page >= state.pagination.last_page) {
				state.loadStatus = 'noMore';
			}
      // console.log(state.pagination.data)
    }
  }
  onLoad((options) => {
    getinfo()
    getGrouponList()
 });
 // 加载更多
 function loadmore() {
    if (state.loadStatus !== 'noMore') {
      state.pagination.current_page++
      getGrouponList();
    }
  }
  async function getduihuan(item){
    if(item.button_type == 1){
      const res = await sheep.$api.goods.duiScoreGoods({
        id:item.id
      });
      if(res.code == 1){
        sheep.$helper.toast(res.msg);
        state.pagination = {
          data: [],
          current_page: 1,
          total: 1,
          last_page: 1,
        }
        state.loadStatus= ''
        getGrouponList();
      }else{
        sheep.$helper.toast(res.msg);
      }
    }else{
      sheep.$helper.toast('拼币不足');
    }
  }

  // 上拉加载更多
  onReachBottom(() => {
    loadmore();
  });
</script>

<style lang="scss" scoped>
.set-wrap{
  padding-bottom: 50rpx;
}
  .qianone{
    height: 360rpx;
    width: 100%;
    position: relative;
    background-color: #FD4F2D;
    .qioneitem{
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 0rpx 40rpx 0rpx;
      height: 100%;
      justify-content: center;
      .jiname{
        font-size: 32rpx;
        font-weight: 400;
        color: #fff;
        .jinum{
          font-size: 45rpx;
          font-weight: 500;
          display: inline-block;
          margin-right: 8rpx;
          position: relative;
          top: 4rpx;

        }
      }
      .shixiao{
        color: #fff;
        font-size: 30rpx;
        font-weight: 400;
        display: block;
        margin-top: 20rpx;
        margin-bottom: 70rpx;
      }
      .guize{
        position: absolute;
        padding: 4rpx 10rpx;
        background-color: #fff;
        border-radius: 50rpx;
        right: 30rpx;
        top: 30rpx;
        color: #FD4F2D;
      }
    }
  }
  .qiantwo{
    position: relative;
    margin: -80rpx 30rpx 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
    padding-bottom: 40rpx;
    .qianji{
      padding: 20rpx 30rpx;
      background-color: rgba(249,225,189,1);
      display: flex;
      align-items: center;
      flex-direction: row;
      border-radius: 20rpx 20rpx 0 0;
      .lianxu{
        color: #8a6d48;
       
      }
      
    }
    .qianbiao{
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 20rpx 30rpx;
      .qianname{
          color: #8a6d48;
          font-size: 28rpx;
          font-weight: 400;
      }
      .qiannum{
        color: red;
        font-size: 38rpx;
        font-weight: 500;
        display: inline-block;
        margin: 0 4rpx;
      }
      .jiming{
        margin-left: auto;
        padding: 4rpx 15rpx;
        color: rgba(222,136,104,1);
        border: 1rpx solid rgba(229,150,117,1);
        border-radius: 50rpx;
      }
    }
    .qianlist{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0 30rpx;
      margin: 40rpx 0;
      .qianitem{
        width: 23%;
        padding: 20rpx 0;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(249,245,242,1);
        margin: 0 2% 20rpx 0;
        .qname{
          color: #333;
          font-size: 28rpx;
          font-weight: 400;
        }
        .mine_yue{
          width: 60rpx;
          height: 60rpx;
          margin: 15rpx 0 10rpx;
        }
        .jimiao{
          color: rgba(139,135,131,1);
          font-size: 25rpx;
          font-weight: 400;
        }
      }
      .qianactive{
        background-color: #ff6d00;
        .qname{
          color: #fff;

        }
        .jimiao{
          color: #fff;
        }
      }
    }
    .qianbtn{
      width: 60%;
      height: 88rpx;
      // background-color: #ff6d00;
      background-color: rgba(205,205,205,1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 28rpx;
      font-weight: 400;
      margin: 0 auto;
      border-radius: 50rpx;
    }
  }
  .dui{
    margin: 50rpx 30rpx 40rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .duixian{
      display: inline-block;
      border: 0.5rpx dotted #FD4F2D;
      flex: 1;
    }
    .duiname{
      color: #FD4F2D;
      font-size: 35rpx;
      font-weight: 500;
      display: inline-block;
      margin: 0 30rpx;
    }
   
  }
  .duilist{
    margin: 0 30rpx 30rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .duiitem{
      display: flex;
      width: 48%;
      // height: 400rpx;
      background-color: #fff;
      border-radius: 30rpx;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      .duitu{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 30rpx 0;
        .data-empty{
          width: 60%;

        }
      }
      .duibot{
        padding: 20rpx;
        display: flex;
        flex-direction: column;
      }
      .dangtian{
        color: #333;
        font-weight: 500;
        font-size: 28rpx;

      }
      .dangview{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 20rpx;
        .dleft{
          display: flex;
          flex-direction: row;
          align-items: center;
          .jinbi{
            width: 35rpx;
            height: 35rpx;
            margin-right: 8rpx;
          } 
          .jinname{
            font-size: 34rpx;
            font-weight: 500;
            color: rgba(247,44,57,1);
          }
        }
        .jidui{
          margin-left: auto;
          padding: 4rpx 15rpx;
          background-color: rgba(205,205,205,1);
          color: #fff;
          font-size: 26rpx;
          font-weight: 400;
          border-radius: 50rpx;
        }
        .gou{
          background-color: #ff6d00;
        }
      }
    }
    .duiitem:nth-child(even){
      margin-left: auto;
    }
  }
  .gou{
        background-color: #ff6d00 !important;
      }
</style>
